{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jquery_ui_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <h3 class="header smaller lighter green">通话结果推送配置:</h3>
    <p></p>


    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row col-sm-12" style="font-size: 18px">
                <div class="col-sm-1" style="text-align: right">
                    <strong>接通推送:</strong>
                </div>
                <div class="col-sm-11">
                    <input type="checkbox" class="ace ace-switch ace-switch-3" id="conn_push" {% if pushInfo.conn_push == 1 %}checked='checked'{% endif %} onclick="switchText(this ,'#connPushUrl')"/>
                    <span class="lbl middle"></span>
                </div>
            </div>
            <div class="row col-sm-12" style="font-size: 18px;margin-top: 20px">
                <div class="col-sm-1" style="margin-top: 5px;text-align: right">
                    <span>推送URL:</span>
                </div>
                <div class="col-sm-11">
                    <input type="text" style="width:500px" value="{{ pushInfo.conn_push_url }}" id="connPushUrl" class="search-query" {% if pushInfo.conn_push == 2 %}readonly='readonly'{% endif %}>
                </div>
            </div>
            <div class="row col-sm-12" style="margin-top: 20px">
                <div class="col-sm-1" style="font-size: 30px;text-align: right;color: rgb(212, 106, 64);">
                    <i class="ace-icon fa fa-exclamation-circle"></i>
                </div>
                <div class="col-sm-11" style="margin-top: 4px">
                    <div>
                        接通推送功能是在来电接通坐席后，向使用云服务的企业或公司组织实时推送来电和接听数据，<br>
                        企业用户可以使用云客服平台提供的数据进行二次开发可以达到规范的数据交互，系统整合，功能整合等。
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row col-sm-12" style="font-size: 18px">
                <div class="col-sm-1" style="text-align: right">
                    <strong>挂机推送:</strong>
                </div>
                <div class="col-sm-11">
                    <input type="checkbox" class="ace ace-switch ace-switch-3" id="hangup_push" {% if pushInfo.hangup_push == 1 %}checked='checked'{% endif %}  onclick="switchText(this,'#pushUrl')"/>
                    <span class="lbl middle"></span>
                </div>
            </div>
            <div class="row col-sm-12" style="font-size: 18px;margin-top: 20px">
                <div class="col-sm-1" style="margin-top: 5px;text-align: right">
                    <span>推送URL:</span>
                </div>
                <div class="col-sm-11">
                    <input type="text" style="width:500px" value="{{ pushInfo.push_url }}" id="pushUrl" class="search-query" {% if pushInfo.hangup_push == 2 %}readonly='readonly'{% endif %}>
                </div>
            </div>
            <div class="row col-sm-12" style="margin-top: 20px">
                <div class="col-sm-1" style="font-size: 30px;text-align: right;color: rgb(212, 106, 64);">
                    <i class="ace-icon fa fa-exclamation-circle"></i>
                </div>
                <div class="col-sm-11" style="margin-top: 4px">
                    <div>
                        挂机推送功能是在通话结束后，向使用云服务的企业或公司组织实时推送通话数据，<br>
                        企业用户可以使用云客服平台提供的数据进行二次开发可以达到规范的数据交互，系统整合，功能整合等。
                    </div>
                </div>
            </div>
        </div>
    </div>



    <p>
        <button class="btn btn-primary btn-round align-middle btn-sm" onclick="subUrl()">
            <i class="ace-icon fa fa-pencil-square-o"></i>
            确认
        </button>
        <button class="btn btn-primary btn-round align-middle btn-sm" id="call_record">查看最近30天的推送结果</button>
    </p>
    <div class="well" style="line-height: 30px">
        <div>了解更多基于消息推送的功能二次开发，请访问以下链接</div>
        <div><a href="http://dev.icsoc.net/callpush.html" target="_blank">API帮助文档/开发者平台 </a></div>
    </div>

    <div id="dialog-confirm" class="hide row form-horizontal page-content">
        <div class="form-group">
            <label class="col-xs-2 col-sm-4">管理员密码</label>
            <input type="password" id="confirm_pass" value="" class="col-xs-10 col-sm-9" style="width: auto" maxlength="20" />
        </div>
        <div class="hide row" id="remark-confirm" style="text-align: center;margin-top: 2px">
            <span id="prompt" style="color: red"></span>
        </div>
        <div class="form-group" style="text-align: center">
            <button id="remark-btns" type="button" class="btn btn-success btn-sm" data-loading-text="Loading...">
                确认
            </button>
        </div>
    </div>
{% endblock %}

{% block footer %}
    {% javascripts
    '@gritter_js'
    '@jquery_ui_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var connPush;
        var hangPush;
        var connPushUrl;
        var pushUrl;
        $('#remark-btns').on('click', function() {
            var pass = $('#confirm_pass').val();
            if (pass.length < 1) {
                remind('gritter-error', '请填写密码');
                return
            }
            $.ajax({
                url: "{{ path('icsoc_security_develop_call_push_set') }}",
                dataType: 'json',
                data: {pass:pass, conn_push:connPush,hangup_push:hangPush, conn_push_url:connPushUrl, push_url:pushUrl},
                type: 'post',
                success: function (res) {
                    if (res.error) {
                        remind('gritter-error', res.msg);
                    } else {
                        $('#dialog-confirm').dialog('close');
                        remind('gritter-success','更新成功');
                    }
                }
            })
        });
        $('#call_record').on('click', function(){
            window.parent.createTab("通话记录推送日志", "{{ path('icsoc_security_develop_call_record_index') }}");
        });

        //提交
        function subUrl(){
            connPush = document.getElementById('conn_push').checked ? 1 : 2;
            hangPush = document.getElementById('hangup_push').checked ? 1 : 2;
            connPushUrl = $('#connPushUrl').val();
            pushUrl = $('#pushUrl').val();
            if (connPush == 1) {
                if(isURL(connPushUrl) == false){
                    remind('gritter-error', 'URL不符合规范');
                    return;
                }
            } else {
                connPushUrl = '';
            }
            if (hangPush == 1) {
                if(isURL(pushUrl) == false){
                    remind('gritter-error', 'URL不符合规范');
                    return;
                }
            } else {
                pushUrl = '';
            }
            $( "#dialog-confirm" ).removeClass('hide').dialog({
                resizable: false,
                modal: true,
                title_html: true,
                height:150,
                width:350,
                title: "请输入管理员密码"
            });
        }

        //切换文本框状态
        function switchText(opthis,theId){
            var type = opthis.checked ? 1 : 2;
            if (type == 1) {
                $(theId).attr('readonly', false);
            } else {
                $(theId).attr('readonly', true);
            }
        }
        //校验URL
        function isURL(url) {
            var strRegex = "^(http|https)://[^\s]*";
            var re = new RegExp(strRegex);
            if (re.test(url)) {
                return true;
            } else {
                return false;
            }
        }

        function remind(a,b) {
            $.gritter.add({
                title: '提醒',
                text: b,
                sticky: false,
                time: 1000,
                speed:500,
                position: 'bottom-right',
                class_name: a//gritter-center
            });
        }
    </script>
{% endblock %}